<template>
  <div>
    <t-navbar title="关于我们" left-arrow @left-click="backPage" :fixed="true" />
    <section class="about-us-section">
      <div class="about-us-content">
        <h1>关于我们</h1>
        <div class="section">
          <h2>我们的故事</h2>
          <transition-group name="slide" tag="div">
            <p v-for="paragraph in storyParagraphs" :key="paragraph">{{ paragraph }}</p>
          </transition-group>
        </div>
        <div class="section">
          <h2>专业团队</h2>
          <transition-group name="slide" tag="div">
            <p v-for="teamPoint in teamPoints" :key="teamPoint">{{ teamPoint }}</p>
          </transition-group>
        </div>
        <div class="section">
          <h2>核心价值观</h2>
          <transition-group name="slide" tag="div">
            <p v-for="value in values" :key="value">{{ value }}</p>
          </transition-group>
        </div>
        <div class="section">
          <h2>联系我们</h2>
          <ul>
            <li><i class="fas fa-phone"></i> 电话：10086</li>
            <li><i class="fas fa-envelope"></i> 邮箱：15515952127@163.com</li>
            <li><i class="fas fa-map-marker-alt"></i> 地址：法国</li>
          </ul>
        </div>
      </div>
    </section>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const backPage = () => {
  // 返回上一级
  history.back();
};

const storyParagraphs = ref([
  '在时光的长河中，我们怀揣着梦想与激情，踏上了这段充满挑战与机遇的征程。',
  '从最初的一个小想法，到如今不断发展壮大，我们始终坚守着对品质的执着追求。',
]);

const teamPoints = ref([
  '我们拥有一支由行业精英组成的专业团队，他们具备丰富的经验和卓越的技能。',
  '团队成员们相互协作，共同攻克一个又一个难题，为用户带来最优质的服务。',
]);

const values = ref([
  '诚信、创新、卓越、共赢，这是我们始终坚守的核心价值观。',
  '诚信为本，确保每一个承诺都能兑现；创新驱动，不断探索新的领域和方法；追求卓越，力求做到最好；共赢合作，与合作伙伴共同成长。',
]);
</script>

<style scoped>
.about-us-section {
  padding: 40px 20px;
  background-color: #f8f8f8;
  min-height: 100vh;
}

.about-us-content {
  max-width: 800px;
  margin: 0 auto;
  background-color: #fff;
  padding: 30px;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

h1 {
  text-align: center;
  color: #333;
  font-size: 2.5rem;
  margin-bottom: 30px;
}

h2 {
  color: #333;
  font-size: 1.8rem;
  margin-bottom: 15px;
  border-bottom: 2px solid #007bff;
  padding-bottom: 5px;
}

p {
  color: #666;
  line-height: 1.8;
  margin-bottom: 15px;
}

ul {
  list-style: none;
  padding: 0;
}

li {
  margin-bottom: 10px;
  color: #666;
  font-size: 1rem;
  display: flex;
  align-items: center;
}

li i {
  margin-right: 10px;
  color: #007bff;
}

.section {
  margin-bottom: 30px;
}

.slide-enter-active,
.slide-leave-active {
  transition: transform 0.5s, opacity 0.5s;
}

.slide-enter-from,
.slide-leave-to {
  transform: translateY(20px);
  opacity: 0;
}
</style>